
<template>
  <div>
    
    <div>
      <!-- 轮播图 -->
      <Swipe></Swipe>
      <!-- 商品分类 -->
      <van-sticky>
        <van-grid class="pd" :border="false" style="background:#fff">
          <van-grid-item
            :border="false"
            text-size="13px"
            class=".van-grid-item__icon .van-grid-item__text bd"
            v-for="(item,index) in goodsList"
            v-show="item.iconUrl"
            :key="index"
            :icon="item.iconUrl"
            :text="item.name"
            @click="type"
          />
        </van-grid>
      </van-sticky>
      <!-- 推荐 -->
      <div>
        <van-tabs v-model="active">
          <van-tab title="推荐">
            <Recommend></Recommend>
          </van-tab>
          <van-tab title="销量">
            <Recommend></Recommend>
          </van-tab>
          <van-tab title="价格">
            <Recommend></Recommend>
          </van-tab>
        </van-tabs>
      </div>

      <FootBar></FootBar>
    </div>
  </div>
</template>
<script>
import Swipe from "./swipe/Swipe";
import Recommend from "./recommend/Recommend";
import FootBar from "@/components/Footer";
export default {
  // name: "home",
  data() {
    return {
      active: 0,
      goodsList: [],
      flag: true,
      
    };
  },
  components: {
    Swipe,
    Recommend,
    FootBar
  },
  methods: {
    type() {
      this.$router.push("/type");
    },
    getGoodsList() {
      let url = "/category/all";
      this.$axios
        .get(url)
        .then(res => {
          this.goodsList = res.list;
          
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  },
  created() {
    this.getGoodsList();
  }
};
</script>
<style lang="less" scoped>
</style>
<style>
.van-grid-item__icon {
  font-size: 45px;
}
.van-grid-item__text {
  font-size: 13px;
}
.pd {
  margin-bottom: 10px;
}

.bd {
  border: 0;
}

</style>
